<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>首页</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../layui/css/layui.css">
  <link rel="stylesheet" href="../../css/swiper.css">
  <link rel="stylesheet" href="../../xznstatic/css/common.css"/>
  <link rel="stylesheet" href="../../xznstatic/css/style.css"/>
  <link rel="stylesheet" href="../../css/home.css">
</head>
<body>
  <div id="app">
    <!-- 轮播图 -->
    <div class="banner">
      <div class="layui-carousel" id="test1">
        <div carousel-item>
          <div v-for="(item,index) in swiperList" :key="index">
            <img class="carousel-image" :src="item.img" />
          </div>
        </div>
      </div>
    </div>

    <div id="content">
      <!-- 公告信息 -->
      <div class="news">
        <div class="box">
          <div class="title">
            <span>公告信息</span>
          </div>
          <div class="list">
            <div v-for="(item,index) in newsList" :key="index" class="list-item" @click="jump('../news/detail.html?id='+item.id)">
              <div class="list-item-body">
                <img class="item-image" :src="item.picture" alt="" />
                <div class="item-info">
                  <div class="name">{{item.title}}</div>
                  <div class="time">{{item.addtime}}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="text-center">
            <button @click="jump('../news/list.html')" class="view-more-button">
              查看更多<i class="layui-icon layui-icon-next"></i>
            </button>
          </div>
        </div>
      </div>

      <!-- 房屋信息展示 -->
      <div class="recommend">
        <div class="box">
          <div class="title">
            <span>房屋信息展示</span>
          </div>
          <div class="list">
            <div v-for="(item,index) in fangwuxinxiList" :key="index" @click="jump('../fangwuxinxi/detail.html?id='+item.id)" class="list-item">
              <div class="list-item-body">
                <img class="item-image" :src="item.tupian?item.tupian.split(',')[0]:''" alt="" />
                <div class="item-info">
                  <div class="name">{{item.fangwumingcheng}}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="text-center">
            <button @click="jump('../fangwuxinxi/list.html')" class="view-more-button">
              查看更多<i class="layui-icon layui-icon-next"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Scripts -->
  <script src="../../layui/layui.js"></script>
  <script src="../../js/swiper.min.js"></script>
  <script src="../../js/vue.js"></script>
  <script src="../../js/config.js"></script>
  <script src="../../modules/config.js"></script>
  <script src="../../js/utils.js"></script>
  <script src="../../xznstatic/js/index.js"></script>
  <!-- 保留原有的 Vue 和其他 JS 代码 -->
  <script type="text/javascript">
    var vue = new Vue({
      el: '#app',
      data: {
        fangwuxinxiList: [],
        swiperList: [],
        // 公告信息
        newsList: [],
        leftNewsList: [],
        rightNewsList: []
      },
      filters: {
        newsDesc: function(val) {
          if (val) {
            val = val.replace(/<[^<>]+>/g, '').replace(/undefined/g, '');
            if (val.length > 60) {
              val = val.substring(0, 60);
            }
            return val;
          }
          return '';
        }
      },
      methods: {
        jump(url) {
          jump(url)
        },
      }
    });

    layui.use(['layer', 'form', 'element', 'carousel', 'http', 'jquery'], function() {
      var layer = layui.layer;
      var element = layui.element;
      var form = layui.form;
      var carousel = layui.carousel;
      var http = layui.http;
      var jquery = layui.jquery;

      // 获取轮播图 数据
      http.request('config/list', 'get', {
        page: 1,
        limit: 5
      }, function(res) {
        if (res.data.list.length > 0) {
          let swiperList = [];
          res.data.list.forEach(element => {
            if (element.value != null) {
              swiperList.push({
                img: element.value
              });
            }
          });

          vue.swiperList = swiperList;

          vue.$nextTick(() => {
            carousel.render({
              elem: '#test1',
              width: '100%',
              height: '500px',
              arrow: 'hover',
              anim: 'fade',
              autoplay: 'true',
              interval: '3000',
              indicator: 'inside'
            });
          })
        }
      });

      // 公告信息
      http.request('news/list', 'get', {
        page: 1,
        limit: 2 * 2,
        order: 'desc'
      }, function(res) {
        var newsList = res.data.list;
        for(var i = 0; i<newsList.length; i++) {
          let d = newsList[i].addtime.split(' ')
          d = d[0].split('-')
          newsList[i].year = d[0]
          newsList[i].month = d[1] + '-' + d[2]
        }
        
        vue.newsList = newsList;
        if (newsList.length > 0 && newsList.length <= 2) {
          vue.leftNewsList = res.data.list
        } else {
          var leftNewsList = []
          for (let i = 0; i <= 2; i++) {
            leftNewsList.push(newsList[i]);
          }
          vue.leftNewsList = leftNewsList
        }
        if (newsList.length > 2 && newsList.length <= 8) {
          var rightNewsList = []
          for (let i = 3; i <= newsList.length; i++) {
            rightNewsList.push(newsList[i]);
          }
          vue.rightNewsList = rightNewsList
        }
      });

      http.request(`fangwuxinxi/list`, 'get', {
        page: 1,
        limit: 4 * 2
      }, function(res) {
        vue.fangwuxinxiList = res.data.list;
      });
    });
  </script>
</body>
</html>
